<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <li th:if="${#lists.isEmpty(courseCatalogList)}">
        <section class="no-data__wrap">
            <em>&nbsp;</em>
            <p>亲，小编正在整理中</p>
        </section>
    </li>

    <li th:if="!${#lists.isEmpty(courseCatalogList)}" th:each="catalog : ${courseCatalogList}" th:attrappend="id='course-catalog-box-'+${catalog['id']}" class="item-content">
        <div class="item-media">
            <span class="lecture-icon"></span>
        </div>
        <div class="item-inner h-item-inner">
            <div class="item-title">
                <a href="javascript:void(0)" th:attrappend="data-catalog=${catalog['materialId']>0?catalog['id']:''}">
                    <span class="c-333 fs8" th:attrappend="data-id=${catalog['materialId']>0?catalog['id']:''}"  th:text="${catalog['catalogName']}"></span>
                    <section th:if="!${#strings.isEmpty(catalog['materialTypeKey'])}" class="wm-attr-wrap row no-gutter">
                        <aside class="text-left col-33">
                            <span th:if="${catalog['materialTypeKey']}=='LIVE'" class="catalog-tag-btn vam">直播</span>
                            <span th:if="${catalog['materialTypeKey']}=='LIVE'" th:text="${#strings.substring(catalog['lessonStartTime'],8,16)}+'~'+${#strings.substring(catalog['lessonEndTime'],11,16)}" class="fs4 c-888 vam"></span>
                            <span th:if="${catalog['materialTypeKey']}=='AUDIO'" class="catalog-tag-btn vam">音频</span>
                            <span th:if="${catalog['materialTypeKey']}=='VIDEO'" class="catalog-tag-btn vam">视频</span>
                            <span th:if="${catalog['materialTypeKey']}=='ARTICLE'" class="catalog-tag-btn vam">文章</span>
                            <span class="fs4 c-888 vam" th:if="${catalog['progress']} != null " th:text="'已学+'${catalog['progress']}"></span>
                            <span class="fs4 c-888 vam" th:if="${catalog['progress']} == null ">未学习</span>
                        </aside>
                        <aside class="text-right col-66" >
                            <span  th:if="!${#lists.isEmpty(catalog['datumList'])}">
                                  <em  th:attrappend="data-catalogId=${catalog['id']},data-url= ${catalog['datumList'][0]['url']}"  class="icon iconfont icon-hudongpiaoicon05"></em>
                            </span>
                            <th:block th:if="${catalog['materialTypeKey']}=='LIVE'">
                                 <span th:if="${catalog['livePlayState']}==1" class="fs4 c-red">
                                <small class="vam">进入直播</small>
                                <small class="icon icon-right"></small>
                            </span>
                                <span th:if="!${#strings.isEmpty(catalog['questionIds'])}" class="c-play-smallIco">
                                <em th:attrappend="data-id=${catalog['id']},data-question=${catalog['questionIds']}" class="fs4 c-bbb icon icon-edit"></em>
                            </span>
                                <span th:if="${catalog['livePlayState']}!=1" class="c-play-smallIco" >
                                <em th:attrappend="data-id=${catalog['id']}" class="fs4 iconfont icon-sanjiao"></em>
                            </span>
                            </th:block>
                            <th:block th:if="!${#strings.isEmpty(catalog['materialTypeKey'])} and ${catalog['materialTypeKey']}!='LIVE'" >
                                <span th:if="${catalog['audition']}==2" th:attrappend="data-id=${catalog['id']}" class="free-tag">免费试听 </span>
                                <span th:if="!${#strings.isEmpty(catalog['questionIds'])}" class="c-play-smallIco">
                                <em th:attrappend="data-id=${catalog['id']},data-question=${catalog['questionIds']}" class="fs4 c-bbb icon icon-edit"></em>
                            </span>
                                <span class="c-play-smallIco">
                                <em th:attrappend="data-id=${catalog['id']}" class="fs4 iconfont icon-sanjiao"></em>
                            </span>
                            </th:block>
                        </aside>
                    </section>
                </a>

                <!-- 二级目录 -->
                <section th:if="!${#lists.isEmpty(catalog['childCourseCatalogList'])}" class="course-menu-tree-childNode__wrap">
                    <ul>
                        <li class="master_node" th:each="subCatalog : ${catalog['childCourseCatalogList']}" th:attrappend="id='course-catalog-box-'+${subCatalog['id']}">
                            <a href="javascript:void(0)" th:attrappend="data-catalog=${subCatalog['id']}">
                                <span class="c-333 fs7" th:attrappend="data-id=${subCatalog['id']}" th:text="${subCatalog['catalogName']}"></span>
                                <section class="wm-attr-wrap row no-gutter">
                                    <!-- 注意 aside -->
                                    <aside class="text-left col-33">
                                        <span th:if="${subCatalog['materialTypeKey']}=='LIVE'" class="catalog-tag-btn vam">直播</span>
                                        <span th:if="${subCatalog['materialTypeKey']}=='LIVE'" th:text="${#strings.substring(subCatalog['lessonStartTime'],8,16)}+'~'+${#strings.substring(subCatalog['lessonEndTime'],11,16)}" class="fs4 vam c-888"></span>
                                        <span th:if="${subCatalog['materialTypeKey']}=='AUDIO'" class="catalog-tag-btn vam">音频</span>
                                        <span th:if="${subCatalog['materialTypeKey']}=='VIDEO'" class="catalog-tag-btn vam">视频</span>
                                        <span th:if="${subCatalog['materialTypeKey']}=='ARTICLE'" class="catalog-tag-btn vam">文章</span>
                                        <span th:if="${#strings.isEmpty(subCatalog['materialTypeKey'])}" class="fs4 c-888 vam">暂未上传</span>
                                        <span class="fs4 c-888 vam" th:if="${subCatalog['progress']} != null" th:text="'已学习'+${subCatalog['progress']}"></span>
                                        <span class="fs4 c-888 vam" th:if="${subCatalog['progress']} == null ">未学习</span>
                                    </aside>
                                    <aside  class="text-right col-66">
                                        <th:block th:if="!${#strings.isEmpty(subCatalog['datumList'])} or !${#strings.isEmpty(subCatalog['questionIds'])}">
                                         <span th:if="!${#strings.isEmpty(subCatalog['datumList'])}" >
                                              <em  th:attrappend="data-catalogId=${subCatalog['id']},data-url= ${subCatalog['datumList'][0]['url']}" class="icon iconfont icon-hudongpiaoicon05"></em>
                                        </span>
                                            <span th:if="!${#strings.isEmpty(subCatalog['questionIds'])}" class="c-play-smallIco">
                                            <em th:attrappend="data-id=${subCatalog['id']},data-question=${subCatalog['questionIds']}" class="fs4 c-bbb icon icon-edit"></em>
                                        </span>
                                        </th:block>

                                        <th:block th:if="${subCatalog['materialTypeKey']}=='LIVE'">
                                            <span th:if="${subCatalog['livePlayState']}==1" class="fs4 c-red"><small class="vam">进入直播</small>
                                            <small class="icon icon-right"></small>
                                        </span>
                                            <span th:if="!${#strings.isEmpty(subCatalog['questionIds'])}" class="c-play-smallIco">
                                            <em th:attrappend="data-id=${subCatalog['id']},data-question=${subCatalog['questionIds']}" class="fs4 c-bbb icon icon-edit"></em>
                                        </span>
                                            <span class="c-play-smallIco">
                                            <em th:attrappend="data-id=${subCatalog['id']}" class="fs4 iconfont icon-sanjiao"></em>
                                        </span>
                                        </th:block>
                                        <th:block th:if="!${#strings.isEmpty(subCatalog['materialTypeKey'])} and ${subCatalog['materialTypeKey']}!='LIVE'">

                                            <span th:if="${subCatalog['audition']}==2" th:attrappend="data-id=${subCatalog['id']}" class="free-tag">试听</span>
                                            <span class="c-play-smallIco">
                                            <em th:attrappend="data-id=${subCatalog['id']}" class="fs4 iconfont icon-sanjiao"></em>
                                        </span>
                                        </th:block>
                                    </aside>
                                </section>
                            </a>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
    </li>
<script type="text/javascript">
    var buyCourse = $('#buyCourse').val();
    if(buyCourse == 'true'){
        $('span.free-tag').remove();
    }
</script>
</html>